<script setup>
import {ref} from 'vue'
import AdminAdd from '@/components/admin/AdminAdd.vue';
import {showMsg} from '@/components/Util';
import axios from 'axios';
import { onMounted} from 'vue';
import router from '@/router';
import { useRouter } from 'vue-router';
import { reactive } from 'vue';

let list = ref([]);
const input1 = ref('')
function getData(){
    axios.get('/api/dd_list').then(res=>{
        if(res.data.status==200){
            list.value = res.data.data;
        }else{
            showMsg("数据获取失败",'error',2000);
        }   
    })
}
function newStudent(){
    addshow.value = false;
    getData();
}

function edit(id){
    //显示表单窗口
    //显示数据到窗口
    addshow.value = true;
    //list [{},{}]
    let obj = list.value.filter(item=>item.id==id);
    student.value = obj[0];
    optype.value = 'edit';
    title.value = '修改学生'
}
let student = ref({id:'',fy:'',rs:'',cw:'',fj:'',sy:'',createTime:'',updateTime:''})
let addshow = ref(false);
let optype = ref('new'); //new 新建 edit 编辑

onMounted(()=>{
    getData();
})

//查询
function chxs(){
    if(input1.value!=""){
        axios.get('/api/getCx?name='+input1.value).then(res=>{
            console.log(res);
            list.value = res.data.data;
        })
    }
}
</script>

<template>
    <!-- <AdminAdd :title="title" :type="optype" :student = "student" v-show="addshow" @submit="newStudent"></AdminAdd> -->
<div class="page">
    <ul class="list">
        <li class="xm">
            <span>房型</span>
            <span>姓名</span>
            <span>电话</span>
            <span>身份证号</span>
            <span>住店时间</span>
            <span>离店时间</span>
        </li>
        <li class="item" v-for="item in list" :key="item.id">
            <span>{{ item.fx }}</span>
            <span>{{ item.yh }}</span>
            <span>{{ item.shouji }}</span>
            <span>{{ item.shenfen }}</span>
            <span>{{ item.createTime }}</span>
            <span>{{ item.updateTime }}</span>
    
        </li>
    </ul>
</div>
</template>

<style scoped>
.list{
    box-shadow: 2px 2px 2px 1px rgba(27, 25, 25, 0.2);
}
    .list>li{   
        display: grid;
        grid-template-columns: repeat(6,2fr);
        /* width: 1100px; */
        /* padding:30px; */
    }
    .list>li span{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        border: 2px #ccc solid;
    }
    .tool{
        display: flex;
        justify-content: space-between;
    }
    .flex{
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin-left: 20px; */
    }
    .cx{
        margin-left: -40px;
        border-radius: 5px;
    }
    .ga{
        margin-left: 40px;
        /* border-radius: 20px; */
    }
    button{
        /* width: 50px; */
        height: 28px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        background-color: rgb(11, 191, 80);
        color: white;
        outline: none;
        border: 0;
        user-select: none;
        /* position: absolute; */
        /* top: 11.5%; */
    }
    button:hover{
        background-color: #cb119a; /* Green */
        color: white;
    }
    .xs{
        display: flex;
        gap: 20px;
    }
    .xm{
       font-size: 22px;
       font-weight: bold; 
    }
    .mn{
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis; 
    }
</style>